<template>
  <div class="inner-page">
    <div class="inner-page-title mb-30">
      <span>数据库和应用迁移评估 TeleDB-DAM</span>
      <div class="fr">
        <span class="btn">演示动画</span>
        <span class="btn">产品试用</span>
      </div>
    </div>
    <div class="flex-row">
      <div class="left-row flex-1 pr-20">
        <div class="section-title">
          <svg-icon iconName="biaoti1" class="mr-10"></svg-icon>产品介绍
        </div>
        <div class="fs-14 f-normal mt-20 mb-20">
          数据库和应用迁移(Advanced Database & Application
          Migration,简称DAM)产品，是一款支持
          把数据库和应用迁移到云(公共云或专有云)的产品，可以显著降低上云的技术难度和成本，尤其是
          Oracle数据库应用。DAM全面评估上云可行性、成本和云存储选型，内置实施协助、数据应用迁移等工
          具，确保可靠、快速上云。
        </div>
        <div class="section-title">
          <svg-icon iconName="biaoti2" class="mr-10"></svg-icon>核心能力
        </div>
        <div class="flex-grid mt-20">
          <div class="list-box" v-for="(item, index) in list" :key="index">
            <div class="title">
              <span>{{ index + 1 }}</span> {{ item.name }}
            </div>
            <div class="mb-20">{{ item.label }}</div>
          </div>
        </div>
      </div>
      <div class="left-row flex-1 pl-20">
        <div class="section-title">
          <svg-icon iconName="biaoti3" class="mr-10"></svg-icon>应用场景
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            :label="item.title"
            :name="item.num"
            v-for="(item, index) in tabList"
            :key="index"
          >
            <div class="list-box">
              <div class="title">
                <span>{{ index + 1 }}</span> {{ item.name }}
              </div>
              <div class="mb-20">{{ item.label }}</div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="section-title mt-20">
          <svg-icon iconName="biaoti3" class="mr-10"></svg-icon>产品功能架构
        </div>
        <div class="framework-img mt-20 bor">
          <img :src="frameworkImg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'nav15',
  data () {
    return {
      activeName: '0',
      list: [
        {
          name: '数据库与应用洞察',
          label:
            '深入洞察Oracle数据库与应用技术栈、复杂度、拓 扑关系与组件依赖。'
        },
        {
          name: '数据库与应用解耦',
          label: '自动化发现Oracle的强弱依赖，解耦Oracle数据库 与应用的关联。'
        },
        {
          name: '数据库迁移方案评估',
          label:
            '通过科学评估到目标库的迁移兼容性，改造工作量、 匹配风格、风险SQL等关键要素。'
        },
        {
          name: '数据库迁移应用改造',
          label:
            '自动识别。Oracle数据库与应用的改造点，并按改造难 度进行分级，甚至进一步定位到具体的代码堆栈与配置文件。'
        },
        {
          name: '数据库迁移割接实施',
          label:
            '联合DAM认证迁移工具，降低Oracle数据库迁移割接 过程中的种种风险，DAM产品与专业服务都能帮助您 最小化迁移风险，为系统的顺利割接保驾护航。'
        },
        {
          name: '数据库迁移评测',
          label:
            'DAM支持对目标库的对应TOP SQL进行性能评测’并 与评估环节发现的TOP SQL进行比对，进一步发现存在的性能风险。'
        }
      ],
      tabList: [
        {
          title: '场景1',
          num: '0',
          name: 'Oracle数据库异构迁移场景',
          label:
            'Oracle数据库异构上云迁移最大的风险来自于不确定性，而ADAM可以把不确定性变成确定性。通过 科学评估到目标库的迁移兼容性，改造工作量、匹配规格、风险SQL等关键要素，DAM能帮助企业最大程度降低Oracle数据库和应用迁移的风险、技术难度和实施周期。'
        },
        {
          title: '场景2',
          num: '1',
          name: 'Oracle数据库与应用解耦场景',
          label:
            'DAM帮助企业全面盘点现存的Oracle数据库与应用资产,深入洞察Oracle数据库与应用技术栈、复 杂度、拓扑关系与组件依赖及Oracle数据库间的强弱依赖，解耦数据库与应用的关联，让企业传统 Oracle应用重获新生，无论是微服务架构，还是云端架构，或是任何数据库架构，都能轻松适配，具备 真正转型成新一代现代化应用的能力。'
        },
        {
          title: '场景3',
          num: '2',
          name: 'Oracle数据库迁移割接实施场景',
          label:
            'Oracle数据库的异构迁移，经常会碰到兼容性、大对象、RAC集群、零停机迁移等种种挑战。ADAM可 评估生成智能迁移计划，联合ADAM认证迁移工具，最大程度降低Oracle数据库在迁移割接过程中的 种种风险，无论是结构迁移，全量、增量迁移割接及数据回流，ADAM都可以最小化迁移风险，为系统 的顺利割接保驾护航。'
        }
      ],
      frameworkImg: require('../../assets/images/pic/img-15.png')
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style scoped lang="scss">
.flex-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
.list-box {
}
</style>
